プログラミング始めたての頃、JavaScript の書籍とか読んでるとこんなこと思いませんか？

「JavaScript ってループのやり方多すぎてどこで何を使えばいいかよくわからん」

かく言う僕もついこの前まではとりあえず生！のノリで forEach を乱用しまくり野郎だった頃が記憶に新しいです。

今回はそんな方に向けて状況によって適切なループ処理を選択できるようになるための、いちアプローチになればと思いこの記事を書きました。

参考になれば幸いです 🙏

まず、以下 3 つの分類で扱うループを振り分けるのが良いと思います。

3 つの大カテゴリーで分けることができましたら以下のカテゴリーからループを選択します。

こちらをベースにそれぞれの動きや特徴を確認していきます。

whileとdo...whileは条件式が true である間ループを繰り返し、条件式が false、または break したときに処理を終了します。

以下のサンプルをご確認ください。

1 つ目のサンプルは要素を追加した場合は Array.forEach の実行時には参照されないが、元の配列には要素が追加されていることが確認できます。

2 つ目のサンプルは Array.forEach の実行した最初に配列の最後の要素を削除しています。削除した要素は参照しないことが確認できます。

３つ目のサンプルは 1 つ目の要素を処理後に処理済みの 1 つ目の要素を削除しています。すると次の 2 番目の要素が参照されず 3 つ目の要素が参照されていることが確認できます。

これは配列の要素を削除したことで要素のインデックスが左づめになって 1 ずつずれたことによる動きです。

Array.forEach の callback に this の値を渡すサンプルです。以下のサンプルをご確認ください。

Counterというオブジェクトを生成し、prototype にaddという forEach の関数の機能を拡張した後にメソッドを呼び出してます。

実行結果で this の値を参照してそれぞれ値が変更されることが確認できます。

もちろん callback で this を渡さなければ参照できません。

ですが、callback の記述をES6で追加されたアロー関数に変更すると this を省略しても参照できます。

もちろん省略しないで this を明示的に渡しても動作します。

Array 系のメソッドの良さの 1 つはアロー関数と組み合わせることで、省略して 1 行でコードを書けるスマートさです。

以下のサンプルをご確認ください。

コメント通りですが、基本波かっこ{}は省略可能です。また、引数が 1 つだけの場合は()も省略できるのでよりスッキリしますね。

ただ、3 つ目の書き方は人によって書く人、書かない人で表記がブレる原因になりますのでコード規約などで定義しておく方が良いと思います。

prettier で、コーディング中は各々好きな書き方しても最終的には整えてくれる。みたいな仕組みを導入しておくなども良いと思います。

配列操作として Array.forEach はfor より手軽にスマートにかける反面、弱点としては break と continue ができないという欠点があります。

以下のサンプルのように return を使うことで continue のような動作を表現することは可能です。

ただ break は仕様上どう頑張ってもできません。ネットなどで検索すればArray.someとの組み合わせで break と同じ動きをさせるなどの記事もありますが、推奨できるものではないのでここでは書きません。

言ってしまえば return で continue する書き方もあまり推奨できません。この場合だと後述しますArray.filterで実装するのが適切です。

冒頭で break と continue が使えないことが弱点と言いましたが、代わりになるメソッドはありますので Array.forEach はあくまですでに加工が終了した配列をシンプルにループする時に使うメソッドと割り切ってその他は別の方法でやるという風に実装していくのが良いかと思います。

Array.mapは配列の各要素に対し、順番にメソッド内に記述した callback の結果を返します。

callback に与えられる引数は以下です。

返り値はcallback の結果から作成される新しい配列です。

動作を確認していきます。以下、サンプルを確認ください。

元の配列から各要素を 2 倍にした新しい配列が生成されていることを確認できます。

また、配列やオブジェクトは参照型ですのでそのまま代入すると参照渡しになりますが、map は新しい配列として生成されるので参照渡しの影響を受けません。

以下のサンプルを確認ください。

このように map の使い所は callback から返された全く新しい配列を生成したいという時に使うのが適しています。

逆に返された配列を使用しない、callback から値を返さない場面などでは適していません。

省略記法も Array.forEach と同様の書き方ができます。違う点があるとしたら map の場合は値を返す必要があるので return の扱いですが、こちらは必ず省略してください。

サンプルで動作を確認します。

return を書くとエラーになることが確認できます。

また、callback に this の変数を渡すこともできます。この時の挙動は Array.forEach と同様です。

Array.forEach 同様に map が呼び出された後に追加された要素に対して callback は実行されず、削除された要素に対しても callback は実行されません。

サンプルで動作を確認します。

配列の中にジャンプの作品名と作者名のオブジェクトが格納されており Array.map で作品名のみ抽出します。

Array.map は新しい配列を返しますのでそのまま配列操作系のメソッドをドット(.)で繋ぐメソッドチェーンにより連続して使用することができます。

このメソッドチェーンは後述します他のArray.filterやArray.reduceなどでも使用することができます。

ただ、Array.forEach に関しては戻り値が undefined のためメソッドチェーンの最後に持ってくることはできても**Array.forEach().map()**のような書き方はできませんので注意してください。

また、サンプルのような配列オブジェクトをループするときは obj.property のようにしてアクセスしますが、分割代入を組み合わせるとより処理の意図を伝えやすくなります。

少し余談ですが、React なども一緒に勉強したいと思ってる方、この分割代入はめっちゃ使うので合わせてチェックするのがおすすめです。

Array.filterは配列の各要素に対し、順番にメソッド内に記述した callback を実行し、条件に一致した結果を返します。

callback に与えられる引数は以下です。

返り値は条件に一致した要素からなる新しい配列です。

this 変数も Array.map などと同様に callback に渡せます。

動作を確認していきます。以下、サンプルを確認ください。

String.indexOfを使用しapの文字列を含む値のみを返すという条件を与えています。

このようにサンプルとそのメソッドの名前からイメージのつく通り Array.filter は配列に対してフィルタをかけた結果を取得したい時などに最適です。

また、Array.filter は条件に一致した要素を配列で返すという仕様です。条件に一致するということはすなわち真偽値で返しても同様の結果を得ることができます。

以下、その一例をサンプルとして載せます。

一見true / falseの配列を生成しているように見えますが Array.filter では true を返せば callback 実行中の要素を返し、false ではスキップするという動きになります。

要素を追加、削除した時のサンプルも確認してみます。

Array.filter で少年ジャンプ連載のマンガのみにフィルタしてから Array.map で作品名+作者の新しい配列を生成し、Array.forEach で結果を出力しています。

Array.reduceは配列の各要素に対し、順番にメソッド内に記述した callback を実行します。その際に直前の要素が返されその要素を元に処理した結果が最終値になります。

callback に与えられる引数は以下です。

返り値は配列全体に実行された callback の結果です。

Array.reduce は Array.map や Array.filter などでいう this の変数を渡す場所でコールバックの初期値を任意で渡すことができます。

この初期値を渡したかどうかで結果が異なるのでそれぞれの結果を見ていきます。

Array.reduce は callback の第 1 引数が直前の要素の結果となります。

それでは配列 0 番目というまだ直前の要素が存在しない場合ではどのようなふるまいになるのでしょうか。

以下のサンプルで動作を確認ください。

ただ単に callbalck 実行中の配列の要素を返すだけのサンプルで結果は 4 です。

4 つの引数を全部 console で出力した時の結果をまとめて見ましょう。

4 つの要素からなる配列なのに current 値は 2 でループの回数は 3 回、index も 1 からスタートと見た感じ最初の要素がスキップされた挙動に見えます。

pre には最初の要素の値である 1 が入っています。

以上から初期値が指定されなかった場合配列の最初の要素で初期化され、current が 2 番目の要素からはじまるということが確認できます。

次に最初の説明でもふれました直前の要素を返すとはどういうことでしょうか。

以下のサンプルを確認ください。

直前の結果(pre)と現在の要素(current)を足した結果を返すサンプルで結果は 10 です。

先ほどと同様に 4 つの引数を全部 console で出力した時の結果をまとめて見ましょう。

pre の値が加算されていますね。加算した値は直前の要素の pre と current を足した return の結果です。直前の要素を返すというのは動きのことを指します。

次に callback に初期値を渡した場合の挙動です。

まずはサンプルで動作と構文を確認ください。

callback の後ろに 10 の値を渡してます。この値が初期値になり出力結果は 20 になります。こちらも同様に結果を整理していきましょう。

ご覧の通り初期値を渡すことにより渡された値で初期化され配列の 0 番目から順番に実行されるようになります。

また、初期値で渡す値は数値である必要はありません。この初期値に渡す値によっていろいろな使い方ができるようになります。

一例をサンプルで確認してみます。

Array.reduce を使った一例として配列の重複をなくすというコードを書いてみます。

まずは Array.map を使った失敗する例を見てみます。

重複の値は検知できますが undefined が配列に入ってきてしまいます。

それでは、Array.reduce での例を見てみます。

初期値に空の配列を渡すのと、Array.reduce の直前の結果が返るという性質を利用して直前の配列の中に現在の要素の値が存在しなかった場合は配列に追加するという処理を行っています。

とは言ってもこの例だと Array.filter でも実現できるんですよね。

Array.filter の真偽値を返せば要素の値が返る性質を利用してます。省略記法でも書けてこっちのがスマートですね。

Array.reduce は始めはとっつき難いかもしれません。 ただ慣れるとめっちゃ便利で、Array.reduce 使えば大体の配列処理ができてしまいます。

ただ、便利だからってなんでもかんでも使うというのはおすすめではないです。 あくまで、やりたいことに一番近しい名前と機能を持っているメソッドを選択しコードの可読性は可能な限り高くする努力はしましょう。

Array.findは配列の各要素に対し、順番にメソッド内に記述した callback を実行し、条件に一致した最初の要素の結果を返します。

callback に与えられる引数は以下です。

返り値は条件に一致した最初の要素です。条件に一致しなかった場合はundefinedが返ります。

this 変数もここまでと同様に callback に渡せます。

サンプルで動作を確認していきます。

このように Array.find は言葉から察しがつくように配列内の要素の値を探し、その結果を取得したいというときに最適です。

配列内の要素の値ではなくインデックスを取得したい場合はArray.findIndexを使用します。

その他にも配列内の指定した値のインデックスを取得するArray.indexOfや配列内に要素が存在するか真偽値を取得するArray.includesなどがありますが、これらは配列の検索というカテゴリで改めてどこかでまとめようかなと思います。

話を戻します。Array.find は Array.filter と同様に条件の一致を見ますので真偽値を返すことでも対象の要素を取得することができます。

サンプルを確認ください。

要素が banana の時に true を返していますが出力結果は banana であることを確認できます。

メソッドが呼び出された時に配列に要素を追加・削除した場合の動きも確認しておきます。

答えは false を返します。

これは JavaScript では 0 は false とみなすという仕様のためです。その他にも値のみで false と判定するリテラル値は複数ありますので簡単にリスト化しておきます。

以上をふまえ次のサンプルを確認ください。

リストを元に false と判定するリテラルのみで構成した配列で検証した結果 false を返し、エクスクラメーション(!)で否定すれば true が返るサンプルです。

この特性を生かすことで配列の正当性などを検証するのに Array.every は最適です。

また、判定式のリストはそのまま if の条件などにも当てはまりますので覚えておくと良いと思います。

次に配列を追加・削除した場合のサンプルを確認していきましょう。以下をご確認ください。

動きは同じですのでArray.every は全要素が条件一致、Array.some はどれかしらの要素が条件一致ということを頭に入れておきましょう。

さいごまで読んでいただきありがとうございます。

まだまだ配列系のメソッドはありますが、よく使うものとしては大体網羅できたかと思います。 ちょっとしたクイックリファレンスみたいに活用してもらえたりしたら嬉しいです。

余談ですが、プロジェクトによっては forEach や for の使用は禁止。基本繰り返し処理は map を使いましょう。みたいなコーディング規約があったりします。

個人的には記事内でちょくちょく言及してますが、何をしたいかによって、その名前や機能から一番可読性が高くなる方法を選ぶのがベストであると思うので反対派です。

コード規約ならそれに沿うが最適解ではあるのですが、何でもかんでもモダンな Array メソッドを使えばいいってことでもないというのはスタンスとして持っておくと良いのではないかなと思い書いた余談でした。

間違いの指摘やリクエストなどありましたら加筆していきたので是非、ご意見をいただけたらと思います。

それではまた次の記事でお会いしましょう。